<template>
	<view>
		<u-swipe-action>
			<u-swipe-action-item v-for="(item, index) in list" :key="item.id" :options="options" :name="index"
				@click="click">
				<view class="swipe-action u-border-top u-border-bottom" @click="goBack">
					<u-row class="item">
						<u-col span="2">
							<image mode="aspectFill" :src="item.images" />
						</u-col>
						<u-col class="content" span="8">
							<text class="title">{{ item.name }}</text><br />
							<text class="msg">{{ item.title }}</text>
						</u-col>
						<u-col class="rightTime" span="2">
							<view class="text">昨天 10:25</view>
							<u-badge type="error" max="99" :value="item.unread"></u-badge>
						</u-col>
					</u-row>
					<!-- <view class="item swipe-action__content"> -->
					<!-- <image mode="aspectFill" :src="item.images" />
						<view class="content">
							<text class="title">{{ item.name }}</text><br />
							<text class="msg">{{ item.title }}</text>
						</view>
						<text class="rightTime">
							昨天 10:25
							<u-badge type="error" max="99" :value="item.unread"></u-badge>
						</text> -->
					<!-- </view> -->
				</view>
			</u-swipe-action-item>
		</u-swipe-action>

		<view class="more" :class="{ more2: isShow, more3: !isShow }">
			<navigator class="more-item" url="../contact/addGroup/index">
				<u-icon class="i" name="chat-fill" color="#fff" size="28"></u-icon>
				<text>创建群聊</text>
				<!-- </view> -->
			</navigator>
			<u-line></u-line>
			<navigator class="more-item" url="../contact/addFriend/index">
				<u-icon class="i" name="man-add-fill" color="#fff" size="28"></u-icon>
				<text>添加好友</text>
			</navigator>
			<u-line></u-line>
			<view class="more-item" @click="modelShow = true">
				<u-icon class="i" name="bell-fill" color="#fff" size="28"></u-icon>
				<text>加入会议</text>
			</view>
			<u-line></u-line>
			<view class="more-item" @click="modelShow = true">
				<u-icon class="i" name="calendar-fill" color="#fff" size="28"></u-icon>
				<text>预约会议</text>
			</view>
		</view>

		<u-modal :show="modelShow" :showCancelButton="true" title="加入会议" @cancel="modelShow = false">
			<view class="slot-content">
				<u-input placeholder="请输入会议ID"></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				modelShow: false,
				list: [{
						id: 1,
						name: 'XXX的小群',
						title: '长安回望绣成堆，山顶千门次第开，一骑红尘妃子笑，无人知是荔枝来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
						unread: '30',
					},
					{
						id: 2,
						name: "XX交友群",
						title: '新丰绿树起黄埃，数骑渔阳探使回，霓裳一曲千峰上，舞破中原始下来',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
						unread: '1',
					},
					{
						id: 3,
						name: "XXX游戏群",
						title: '登临送目，正故国晚秋，天气初肃。千里澄江似练，翠峰如簇',
						images: 'https://cdn.uviewui.com/uview/common/logo.png',
						show: false,
						unread: '',
					}
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: '置顶',
						style: {
							backgroundColor: '#007aff'
						}
					}, {
						text: '标为未读',
						style: {
							backgroundColor: '#ffaa00'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			};
		},
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('tabbar.msg')
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$t('tabbar.contact')
			})
			uni.setTabBarItem({
				index: 2,
				text: this.$t('tabbar.meeting')
			})
			uni.setTabBarItem({
				index: 3,
				text: this.$t('tabbar.my')
			})
		},
		methods: {
			// 点击
			click(index) {
				// console.log(index)
				if (index.index == 2) {
					this.$u.toast(`删除`);
					this.list.splice(index.name, 1);
				} else if (index.index == 1) {
					this.$u.toast(`标记`);
				} else if (index.index == 0) {
					this.$u.toast(`置顶`);
					let obj = {};
					this.list.forEach((item, i) => {
						if (i === index.name) {
							let newArr = this.list.splice(i, 1);
							// console.log(newArr);
							this.list.unshift(newArr[0]);
							return;
						}

					})

				}
			},
			goBack() {
				uni.navigateTo({
					url: './friends/index',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			onNavigationBarButtonTap(e) {
				// console.log(e)
				this.isShow = !this.isShow
			},
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		.u-col {
			image {
				margin: 0 auto;
				// width: 120rpx;
				// height: 120rpx;
				width: 60px;
				height: 60px;
			}
		}

		.content {
			display: inline-block;
			// width: 70%;

			.title {
				display: inline-block;
				text-align: left;
				font-size: 17px;
				// margin-top: 5rpx;
			}

			.msg {
				font-size: 17px;
				margin-top: 5rpx;
				// width: 100%;
				color: #a1a1a1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
		}

		.rightTime {
			// margin-top: 10rpx;
			width: 100%;
			text-align: center;
			margin: 0 auto;
			color: #a1a1a1;
			.text{
				position: absolute;
				top: 10px;
				font-size: 12px;
				float: right;
			}
			.u-badge {
				// margin: 0 auto;
				margin-top: 35rpx;
				width: fit-content;
				max-width: 30rpx;
				// float: right;
				// position: relative;
				// right: calc(-50%);
			}
		}
	}


	// .item {
	// 	display: inline-flex;
	// 	padding: 20rpx;
	// 	image {
	// 		width: 60px;
	// 		flex: 0 0 120rpx;
	// 		height: 60px;
	// 		margin-right: 20rpx;
	// 		border-radius: 12rpx;
	// 	}
	// 	.content {
	// 		display: inline-block;
	// 		width: 70%;
	// 		.title {
	// 			display: inline-block;
	// 			text-align: left;
	// 			font-size: 17px;
	// 			margin-top: 5rpx;
	// 		}
	// 		.msg {
	// 			font-size: 17px;
	// 			margin-top: 10rpx;
	// 			width: 100%;
	// 			color: #a1a1a1;
	// 			overflow: hidden;
	// 			text-overflow: ellipsis;
	// 			display: -webkit-box;
	// 			-webkit-box-orient: vertical;
	// 			-webkit-line-clamp: 1;
	// 		}
	// 	}
	// 	.rightTime {
	// 		font-size: 12px;
	// 		margin-top: 20rpx;
	// 		width: 70px;
	// 		float: right;
	// 		color: #a1a1a1;
	// 		.u-badge{
	// 			margin-top: 15rpx;
	// 			margin-right: 15rpx;
	// 			width: 30rpx;
	// 			float: right;
	// 		}
	// 	}
	// }

	.more {
		// width: 240rpx;
		width: 120px;
		background-color: rgb(77, 77, 77);
		position: fixed;
		border-radius: 10px;
		// top: 0px;
		/* #ifdef APP-PLUS */
		top: 0px;
		/* #endif */
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		right: 5px;
		z-index: 99;

		.more-item {
			padding: 20rpx;

			.i {
				display: inline-block;
			}

			text {
				float: right;
				margin-top: 5rpx;
				color: #fff;
			}
		}
	}

	.more2 {
		transition-duration: 0.5s;
		transform: translateY(0px);
	}

	.more3 {
		transition-duration: 0.5s;
		transform: translateY(-500px);
	}

	// .swipe-action,
	// .u-border-top,
	// .u-border-bottom {
	// 	// border: none;
	// 	border-bottom-width: 0px !important;
	// 	border-top-width: 0px !important;
	// }

	.u-border-top {
		border-top-width: 0px !important;
		background-color: #fff;
	}

	.u-border-bottom {
		border-bottom-width: 0px !important;
		background-color: #fff;
		// color: #fff;
	}
</style>